<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 id="hh">{{msg}}</h1>
    </div>
</body>
</html> 
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>

    let vm = new Vue({
        el:"#app",
        data:{
            msg:"小兵张嘎"
        },
        beforeCreate(){
            console.group('beforeCreat')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        },
        created(){
            console.group('creat')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        },
        beforeMount () {
            console.group('beforeMount')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        },
        mounted () { 
            console.group('mounted')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        },
        beforeUpdate () {
            console.group('beforeUpdata')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()  
        },
        updated () {
            console.group('updated')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd() 
        },
        beforeDestroy () {
            console.group('beforeDestroy')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        },
        destroyed () {
            console.group('destroyed')
            console.log('h1#hh-innerText',document.querySelector('#hh').innerText)
            console.log('vm.el',this.$el)
            console.log('data',this.data)
            console.groupEnd()
        }
    })

</script>